<template>
  <div class="p-2">
    <!-- 添加或修改学生请假对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="750px" append-to-body>
      <el-row>
        <el-col :span="3" style="width: 100%">
          <span>请假信息</span>
        </el-col>
        <el-col :span="21">
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>申请人：{{ form.guardianName }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span>申请时间：{{ form.applyTime }}</span>
            </el-col>
          </el-row>
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>学生姓名：{{ form.studentName }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span>所属班级：{{ form.className }}</span>
            </el-col>
          </el-row>
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>起止日期：{{ form.startTime }}至{{ form.endTime }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span>所属级别：{{ form.gradeLevel }}级别</span>
            </el-col>
          </el-row>
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>请假类型：{{ leave_type.find(e => e.value === form.leaveType)?.label }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span>住宿类型：{{ student_accommodation_type.find(e => e.value === form.accommodationType)?.label }}</span>
            </el-col>
          </el-row>
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>请假事由：{{ form.leaveReason }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span>接送方式：{{ form.shuttleWay }}</span>
            </el-col>
          </el-row>
          <el-row style="padding-bottom: 10px">
            <el-col :span="14" style="width: 100%">
              <span>审批状态：{{ student_leave_audit_status.find(e => e.value === form.auditStatus)?.label }}</span>
            </el-col>
            <el-col :span="8" style="width: 100%">
              <span style="vertical-align: top">签名图片：</span> <image-preview :src="form.signPic" :width="100" :height="100" />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="3" style="width: 100%">
          <span>附件</span>
        </el-col>
        <el-col :span="21">
          <image-preview :src="form.attachment" :width="100" :height="100" />
        </el-col>
      </el-row>
      <el-divider />
      <el-row>
        <el-col :span="3" style="width: 100%">
          <span>请假流程</span>
        </el-col>
        <el-col :span="21"> </el-col>
      </el-row>
      <el-divider />
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="StudentLeaveDetailDialog" lang="ts">
import { getStudentLeave } from '@/api/attendance/leave/student';
import { StudentLeaveVO, StudentLeaveQuery, StudentLeaveForm } from '@/api/attendance/leave/student/types';
import { listClassInfo } from '@/api/office/class';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { student_leave_permit_status, student_accommodation_type, leave_type, student_school_status, student_leave_audit_status, school_grade_level } =
  toRefs<any>(
    proxy?.useDict(
      'student_leave_permit_status',
      'student_accommodation_type',
      'leave_type',
      'student_school_status',
      'student_leave_audit_status',
      'school_grade_level'
    )
  );
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const studentLeaveFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const searchClassInfo = (queryString, cb) => {
  listClassInfo({ className: queryString }).then((response) => {
    cb(response.rows);
  });
};
const initFormData: StudentLeaveForm = {
  id: undefined,
  studentId: undefined,
  studentName: undefined,
  classId: undefined,
  className: undefined,
  studentStatus: undefined,
  accommodationType: undefined,
  startTime: undefined,
  endTime: undefined,
  leaveDuration: undefined,
  auditStatus: undefined,
  auditOpinion: undefined,
  leaveType: undefined,
  leaveReason: undefined,
  shuttleWay: undefined,
  guardianId: undefined,
  guardianName: undefined,
  signPic: undefined,
  staffId: undefined,
  staffName: undefined,
  applyTime: undefined,
  auditTime: undefined,
  permitStatus: undefined,
  permitTime: undefined
};
const data = reactive<PageData<StudentLeaveForm, StudentLeaveQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    studentName: undefined,
    classId: undefined,
    gradeLevel: undefined,
    studentStatus: undefined,
    accommodationType: undefined,
    startTime: undefined,
    endTime: undefined,
    leaveDuration: undefined,
    auditStatus: undefined,
    leaveType: undefined,
    shuttleWay: undefined,
    permitStatus: undefined,
    params: {
      applyTime: undefined,
      auditTime: undefined,
      permitTime: undefined
    }
  },
  rules: {}
});

const { queryParams, form, rules } = toRefs(data);

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  studentLeaveFormRef.value?.resetFields();
};

const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = '添加学生请假';
};

/** 修改按钮操作 */
const handleUpdate = async (id: string | number) => {
  reset();
  const res = await getStudentLeave(id);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = '查看请假信息';
};

/** 提交按钮 */
const submitForm = () => {
  cancel();
};

defineExpose({
  handleUpdate,
});

onMounted(() => {});

</script>
